import React from 'react'
// 引入vant组件
import { Button, Input, Form, Cell, Dialog } from 'react-vant'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { login } from '@/api/login'
// 头部导航
import NavBarCom1 from '@/components/NarBarCom1'
type Props = {}

export default function Login({ }: Props) {
    const navigate = useNavigate()
    const [form] = Form.useForm()

    const onFinish = (values: any) => {
        console.log('values', values)  //{password: 'xt0008782!', loginname: 'xieting'}
        login(values).then((res) => {
            console.log('登录', res);
            if (res.data.code == '200') {
                // 登陆成功 会返回：res.data.data包含：{res.data.data.token：和res.data.data.userid}
                // 可以在登录页将token和userid存储到localStorage里面
                localStorage.setItem('token', res.data.data.token)
                localStorage.setItem('userid', res.data.data.userid)
                console.log('navigate', navigate);
                navigate('/home')  // 相当于 router.push("/home") 但是没有起作用，为啥？？？，路径变了，但是页面没有变化
            } else if (res.data.code == '10010') {
                Dialog.confirm({
                    confirmButtonText: '用户注册',
                    message:
                        '该账户不存在',
                })
                    .then(() => {
                        navigate('/design')
                    })
                    .catch(() => {
                        // on cancel
                    });
            }
        })
    }

    return (
        <div>
            {/* 头部导航 */}
            <NavBarCom1>京东登录</NavBarCom1>
            {/* 表单 */}
            <Form
                form={form}
                onFinish={onFinish}
                footer={
                    <div style={{ margin: '16px 16px 0' }}>
                        <Button round nativeType='submit' type='danger' block>
                            提交
                        </Button>
                    </div>
                }
            >
                <Form.Item
                    rules={[{ required: true, message: '请填写用户名' }]}
                    name='loginname'
                    label='用户名'
                >
                    <Input placeholder='请输入用户名' />
                </Form.Item>
                <Form.Item
                    rules={[{ required: true, message: '请填写密码' }]}
                    name='password'
                    label='密码'
                >
                    <Input placeholder='请输入密码' />
                </Form.Item>
            </Form>
            <Cell value='去注册' style={{ 'color': 'red' }} />
            <Cell title='快速注册' isLink className='kua-su' onClick={() => { navigate('/design') }} />
        </div>
    )
}